<template>
  <van-popup
    v-model:show="showBottom"
    position="bottom"
    round
    teleport="#minutesPage"
    :style="{ height: '80%' }"
  >
    <div class="flex flex-col h-full">
      <h2 class="font-bold my-3 text-center">选择客户({{ list?.length }})</h2>
      <div class="flex flex-row items-center justify-between px-3 pb-4">
        <div class="flex-auto">
          <van-search
            v-model="searchValue"
            shape="round"
            placeholder="请输入公司名称"
            input-align="center"
            @search="onSearch"
            @update:model-value="(v) => debounce(() => onSearch(v))"
          >
            <template #action>
              <div @click="onClickButton">搜索</div>
            </template>
          </van-search>
        </div>

        <div class="text-yxt-blue" v-if="customerTypeList?.length > 0" @click="onCreate">
          新建
        </div>
      </div>

      <div class="flex-auto overflow-y-auto">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            :immediate-chec="false"
            finished-text="没有更多了"
          >
            <van-cell v-for="item in list" :key="item">
              <div
                class="flex flex-row items-center justify-between text-left h-full py-2"
              >
                <div
                  class="flex-auto flex flex-row items-center"
                  @click="onSelectBox(item)"
                >
                  <img
                    v-if="item.selected"
                    src="https://meetcdn.yxt.com/lingxi-static-resources/img/checked_icon.svg"
                    alt="选中"
                  />
                  <img
                    v-else
                    src="https://meetcdn.yxt.com/lingxi-static-resources/img/uncheck_icon.svg"
                    alt="未选"
                  />
                  <div class="ml-2">
                    <h5 class="text-[#262626] text-[16px]">{{ item.name }}</h5>
                    <p class="text-[#8C8C8C] text-[12px]">{{ getDes(item) }}</p>
                  </div>
                </div>

                <div
                  v-if="item.formFieldValues?.length > 0"
                  class="w-[100px] h-[44px] flex justify-center items-center"
                  @click="showDetailFun(item)"
                >
                  <van-icon name="arrow"></van-icon>
                </div>
              </div>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </div>

      <div class="px-4 pb-8 pt-1">
        <van-button
          size="large"
          :disabled="selectCount === 0"
          round
          color="#436BFF"
          @click="onConfirm"
          >确定</van-button
        >
      </div>
    </div>
  </van-popup>

  <editCustomerView
    ref="editCustomerRef"
    @create-success="onRefresh"
    :customerTypeId="currentCustomerType?.id"
  />
  <selectCustomerTypeView
    ref="selectCustomerTypeRef"
    :list="customerTypeList"
    @confirm="onConfirmCustomerType"
  />

  <van-popup v-model:show="showDetail" teleport="#minutesPage" round>
    <div class="rounded-md flex flex-col w-[320px] px-10 py-6">
      <h2 class="w-full font-bold text-center mb-2">{{ itemDetail.name }}</h2>
      <p>{{ getDetail(itemDetail) }}</p>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, defineExpose, onMounted, computed, defineEmits } from "vue";
import { searchCustomerListAPI } from "@/services/minutes/customer";
import { showToast } from "vant";
import editCustomerView from "./editCustomerView.vue";
import selectCustomerTypeView from "./selectCustomerTypeView.vue";
import debounce from "@/utils/debounce";
import { useMinutesStore } from "@/store";

const emits = defineEmits(["onConfirm"]);

// const commonStore = useCommonStore();
const conferenceMinutesStore = useConferenceMinutesStore();

onMounted(() => {
  conferenceMinutesStore.searchCustomerTypeAction();
  onRefresh();
});

const customerTypeList = computed(() => conferenceMinutesStore.customerTypeList);

function onSelectBox(v) {
  list.value.forEach((value) => (value.selected = false));
  v.selected = true;
}

const selectArray = computed(() => list.value.filter((v) => v.selected));
const selectCount = computed(() => selectArray.value.length);

// 列表相关
const searchValue = ref("");
const list = ref([]);
const loading = ref(false);
const refreshing = ref(false);
const finished = ref(false);
const totalNum = ref(0);

function getDes(item) {
  const { formFieldValues } = item;

  if (!formFieldValues) {
    return "";
  }

  return formFieldValues.map((v) => v.fieldName + ":" + v.fieldValue).join(" . ");
}

function getDetail(item) {
  const { formFieldValues } = item;
  if (!formFieldValues) {
    return "";
  }
  return formFieldValues.map((v) => v.fieldName + ":" + v.fieldValue).join(" \r\n ");
}

const showDetail = ref(false);
const itemDetail = ref(null);

function showDetailFun(item) {
  console.log(item);
  showDetail.value = true;
  itemDetail.value = item; //getDetail(item);
}

async function onRefresh() {
  refreshing.value = true;
  await loadData();
  refreshing.value = false;
}

function onSearch() {
  loadData();
}

async function loadData() {
  loading.value = true;
  let res = await searchCustomerListAPI(searchValue.value);
  const { code, data, message } = res;
  if (code !== 0) {
    loading.value = false;
    showToast(message);
    return;
  }

  totalNum.value = data.length;
  console.log("客户列表： ", data);

  loading.value = false;
  finished.value = true;
  list.value = data;
}

function onConfirm() {
  if (selectArray.value.length === 0) {
    return;
  }
  emits("onConfirm", selectArray.value[0]);
  hidden();
}

//创建客户相关
const editCustomerRef = ref();
const selectCustomerTypeRef = ref(null);
const currentCustomerType = ref();
function onCreate() {
  selectCustomerTypeRef.value.show();
}

function onConfirmCustomerType(v) {
  if (v == null) return;
  currentCustomerType.value = v;
  setTimeout(() => {
    editCustomerRef.value.show();
  }, 200);
}

// 控制显示隐藏相关
const showBottom = ref(false);

function show() {
  showBottom.value = true;
}

function hidden() {
  showBottom.value = false;
}

defineExpose({
  show,
  hidden,
});
</script>

<style scoped lang="less"></style>
